<extend name="Public/base" />

<block name="body">
           	
    <div class="row">
        <div class="col-md-12">
            <div class="portlet box blue">
                <div class="portlet-title">
                    <div class="caption"><i class="fa fa-reorder"></i>菜单排序 [ <a href="{:U('index',array('pid'=>I('pid')))}">返回列表</a> ]</div>
                    <div class="tools">
                        <a href="javascript:;" class="collapse"></a>
                        <a href="#portlet-config" data-toggle="modal" class="config"></a>
                        <a href="javascript:;" class="reload"></a>
                        <a href="javascript:;" class="remove"></a>
                    </div>
                </div>
                <div class="portlet-body form">
                    <!-- BEGIN FORM-->
                    <form action="{:U('sort')}" method="post">

                        <div class="form-body">
                        	<div class="row">
                                <div class="sort_center col-md-3">
                                    <div class="sort_option">
                                        <select value="" size="8" class="col-md-12">
                                            <volist name="list" id="vo">
                                                <option class="ids" title="{$vo.title}" value="{$vo.id}">{$vo.title}</option>
                                            </volist>
                                        </select>
                                    </div>
                                </div>
                                <div class="sort_bottom col-md-3">
                                    <div class="table-toolbar">
                                        <div class=" btn-group-vertical">
                                            <button class="top blue btn" type="button">第 一</button>
                                            <button class="up blue btn" type="button">上 移</button>
                                            <button class="down blue btn" type="button">下 移</button>
                                            <button class="bottom blue btn" type="button">最 后</button>
                                        </div>
                                    </div>
                                </div>
                        	</div>
                        </div>
                        
                        <div class="form-actions">
                            <div class="col-md-offset-3 col-md-9">
                                <input type="hidden" name="ids">
                                <button class="sort_confirm btn blue submit-btn" type="button">确 定</button>
                                <button class="sort_cancel btn default btn-return" type="button" url="{$Think.cookie.__forward__}">返 回</button>                         
                            </div>
                        </div>
                    </form>
                    <!-- END FORM--> 
                </div>
            </div>
        </div>
    </div>
</block>

<block name="script">
	<script type="text/javascript">
		$(function(){

			highlight_subnav('{:U('Menu/index')}');
			
			sort();
			$(".top").click(function(){
				rest();
				$("option:selected").prependTo("select");
				sort();
			})
			$(".bottom").click(function(){
				rest();
				$("option:selected").appendTo("select");
				sort();
			})
			$(".up").click(function(){
				rest();
				$("option:selected").after($("option:selected").prev());
				sort();
			})
			$(".down").click(function(){
				rest();
				$("option:selected").before($("option:selected").next());
				sort();
			})
			$(".search").click(function(){
				var v = $("input").val();
				$("option:contains("+v+")").attr('selected','selected');
			})
			function sort(){
				$('option').text(function(){return ($(this).index()+1)+'.'+$(this).attr("title")});
			}

			//重置所有option文字。
			function rest(){
				$('option').text(function(){
					return $(this).text().split('.')[1]
				});
			}

			//获取排序并提交
			$('.sort_confirm').click(function(){
				var arr = new Array();
				$('.ids').each(function(){
					arr.push($(this).val());
				});
				$('input[name=ids]').val(arr.join(','));
				$.post(
					$('form').attr('action'),
					{
					'ids' :  arr.join(',')
					},
					function(data){
						if (data.status) {
	                        updateAlert(data.info + ' 页面即将自动跳转~','alert-success');
	                    }else{
	                        updateAlert(data.info,'alert-success');
	                    }
	                    setTimeout(function(){
	                        if (data.status) {
	                        	$('.sort_cancel').click();
	                        }
	                    },1500);
					},
					'json'
				);
			});
			
			//点击取消按钮
			$('.sort_cancel').click(function(){
				window.location.href = $(this).attr('url');
			});

		})
	</script>
</block>